<script lang="ts" setup>
import { reactive, toRefs } from 'vue'
import { PlusOutlined } from '@ant-design/icons-vue'


const emits = defineEmits(["callback"]);


// 响应式数据
const state = reactive({
  visible: false,
  value: ''
})

// 响应式数据解析
const { visible, value } = toRefs(state)


//展示输入框
const showInput = () => {
  visible.value = true;
}


// 确定关键词
const handleInputConfirm = () => {
  console.log("确定")
  emits('callback', value.value, () => {
    visible.value = false;
    value.value = "";
  })
}
</script>

<template>
  <div>
    <a-input v-if="visible" v-model:value="value" size="small" @blur="handleInputConfirm"
             @keyup.enter="handleInputConfirm" />
    <a-tag v-else bordered class="cursor-pointer" color="green" @click="showInput">
      <plus-outlined />
      新增关键词
    </a-tag>
  </div>
</template>

<style lang="less" scoped>

</style>
